import React, { Component } from 'react'
import { baseUrl, caipinUrl } from '../util/constHelper.js'
import Table from '../util/Table.jsx'
import axios from 'axios'
import Model from '../util/Model.dishes.jsx'
import Img from "../util/Img.jsx";


let classesList = []
let changeArr = []
export default class Dishes extends Component {
	state = {
		dishesList: [],
		current: 1,
		pageSize: 10,
		total: 0,
		isShow: false,
		changeObj: {},
		imgUrl:''
	}

	componentDidMount() {
		this.getData()
	}

	getData = () => {
		const that = this
		const getCaipin = () => {
			return axios({
				url: caipinUrl,
				method: "get",
				params: {
					transform: 1,
					order: 'id,desc',
					page: `${this.state.current},${this.state.pageSize}`
				}
			}).then(res => {
				return res.data
			}).then().catch({})
		}

		const getCaipinfenlei = () => {
			return axios({
				url: baseUrl,
				method: "get",
				params: {
					transform: 1,
					order: 'id,desc'
				}
			}).then(res => {
				return res.data
			}).then().catch({})
		}

		axios.all([getCaipin(), getCaipinfenlei()]).then(
			axios.spread(function (res, resp) {

				let dishList = []

				dishList = res.dc_caipin
				classesList = resp.dc_caipinfenlei

				dishList.forEach(dish => {
					classesList.forEach(cla => {
						if (dish.classify === cla.id)
							dish.classify = cla.foodtype
					})
					dish.price = dish.price.toFixed(2)
				})

				that.setState({
					dishesList: dishList,
					total: res._results
				})
			})

		)

	}

	saveData = (data) => {
		let method = 'post',
			url = caipinUrl
		if (data.id) {
			method = 'put'
			url = caipinUrl + '/' + data.id
		}
		if (!!data.price) {
			data.price = (data.price *1 ).toFixed(2)
		}
		axios({
			url,
			method,
			data,
		}).then(res => {
			return res.data.dc_caipin
		}).then(() => {
			this.getData()
			this.hideForm()
			changeArr = []
		}).catch({})
	}

	hideForm = () => {
		this.setState({ isShow: false })
	}
	showForm = (e) => {
		if (e === 'update') {
			if (changeArr.length !== 1) {
				alert('只能选择一项修改')
				return
			}
			this.setState({ changeObj: changeArr[0] })
		} else {
			this.setState({
				changeObj: {}
			})
		}
		this.setState({
			isShow: true
		})
	}

	handleCheckbox = (a, e) => {
		if (e.target.checked) {
			changeArr.push(a)
		} else {
			changeArr.map((ch, index) => {
				if (ch.id === a.id) {
					changeArr.splice(index, 1)
				}
			})
		}
	}

	showPic=(a)=>{
		this.setState({
			imgUrl:'http://localhost/students/upload/'+ a
		})
	}
	hidePic=()=>{
		this.setState({
			imgUrl:''
		})
	}

	render() {
		const columns = [
			{
				title: '菜品名字',
				dataIndex: 'foodname',
				key: 'foodname',
				width: '150px'
			},
			{
				title: '价格',
				dataIndex: 'price',
				key: 'price',
				width: '100px'
			},
			{
				title: '菜品说明',
				dataIndex: 'description',
				key: 'description',
				width: '300px'
			},
			{
				title: '菜品类别',
				dataIndex: 'classify',
				key: 'classify',
				width: '150px'
			},
			{
				title: '菜品预览',
				dataIndex: 'img',
				key: 'img',
				width: '150px',
				render: record => {
					if(record.img){
						return <button onClick={this.showPic.bind(null, record.img)} className="btn btn-sm btn-info"><a href="javascript:;">查看</a></button>
					} else {
						return <span>无照片</span>
					}
				}
			},
			{
				title: '添加时间',
				dataIndex: 'createtime',
				key: 'createtime',
				width: '150px'
			}
		]

		const pagination = {
			handlePageChange: (page) => {
				this.setState({
					current: page
				}, () => {
					this.getData()
				})
			},
			current: this.state.current,
			pageSize: this.state.pageSize,
			total: this.state.total
		}

		return (
			<section className="content container-fluid">
				<section className="content-header no-padding">
					<h1>
						菜品管理
            	<small>ED订餐管理系统</small>
					</h1>
					<ol className="breadcrumb no-padding">
						<li><a href=""><i className="fa fa-dashboard"></i> 首页</a></li>
						<li className="active">菜品管理</li>
					</ol>
				</section>
				<div className="row" style={{ margin: "10px 0" }}>
					<div className="col-xs-4 no-padding">
						<div className="btn-group">
							<button onClick={this.showForm} type="button" className="btn btn-info">新增</button>
							<button onClick={this.showForm.bind(null, 'update')} type="button" className="btn btn-warning">修改</button>
							<button type="button" className="btn btn-danger">删除</button>
						</div>
					</div>
				</div>

				<Table
					dataSource={this.state.dishesList}
					columns={columns}
					fixedHeader={true}
					handleCheckbox={this.handleCheckbox}
					pagination={pagination}
				/>

				<div>
					{this.state.isShow &&
						<Model
							saveData={this.saveData}
							hideForm={this.hideForm}
							changeObj={this.state.changeObj}
							classesList={classesList}
						/>}
				</div>

				<div>
					{
						!!this.state.imgUrl &&
						<Img 
							hidePic={this.hidePic}
							imgSrc={this.state.imgUrl}
						/>
					}
				</div>
			</section>
		)
	}
}
